<template>
  <div class="main w-100P">
    <!-- <custom-button title="添加已有字段"></custom-button> -->
    <custom-button title="添加新字段" @click="isNewDialogVisible = true"></custom-button>
    <div class="h-100P model-function mg-top-20">
      <div class="normal-height ">
        <table-card
          title="属性"
          :table-set="propertyTableSet"
          :page="propertyPage"
          @updateCilck="updataField($event, '属性')"
          @deleteCilck="handleDeleteProperty"
          @pageChange="changePage($event, '属性')"
        />
      </div>
      <div class="normal-height mg-top-20 ">
        <table-card
          title="服务"
          :table-set="serviceTableSet"
          :page="servicePage"
          @updateCilck="updataField($event, '服务')"
          @deleteCilck="handleDeleteService"
          @pageChange="changePage($event, '服务')"
        />
      </div>
      <div class="normal-height mg-top-20 ">
        <table-card
          title="事件"
          :table-set="eventTableSet"
          :page="eventPage"
          @updateCilck="updataField($event, '事件')"
          @deleteCilck="handleDeleteEvent"
          @pageChange="changePage($event, '事件')"
        />
      </div>
    </div>

    <new-field-dialog
      ref="newField"
      :is-show="isNewDialogVisible"
      @subClick="handleSubNewDialog"
      @cancelClick="handleCancelNewDialog"
    />
    <copy-field-dialog :is-show="isCopyDialogShow" />
    <el-dialog
      title="修改字段"
      :visible.sync="isUpdateShow"
      :before-close="handleCancelUpdate"
      :width="handleScreenWidthToVw(574)+'px'"
    >
      <el-form ref="updateFieldForm" :model="fieldForm" label-width="100px" :rules="Rules">
        <el-form-item label="字段类型">
          <span>{{ fieldType }}</span>
        </el-form-item>
        <el-form-item v-if="fieldType === '属性'" label="属性名称" prop="name">
          <el-input v-model="fieldForm.name" placeholder="请输入属性名称" />
        </el-form-item>
        <el-form-item v-if="fieldType === '服务'" label="服务名称" prop="name">
          <el-input v-model="fieldForm.name" placeholder="请输入服务名称" />
        </el-form-item>
        <el-form-item v-if="fieldType === '事件'" label="事件名称" prop="name">
          <el-input v-model="fieldForm.name" placeholder="请输入事件名称" />
        </el-form-item>
        <!-- <el-form-item  label="标识符" prop="property">
          <el-input v-model="fieldForm.property" placeholder="请输入标识符" />
        </el-form-item> -->
        <el-form-item v-if="fieldType !== '属性'" label="标识符" prop="identifier">
          <el-input v-model="fieldForm.identifier" placeholder="请输入标识符" />
        </el-form-item>
        <el-form-item v-if="fieldType === '属性'" label="参数类型" prop="type">
          <el-select v-model="fieldForm.type" placeholder="请选择参数类型">
            <el-option label="浮点数" value="FLOAT" />
            <el-option label="长整数" value="LONG" />
            <el-option label="字符串" value="STRING" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="fieldType === '事件'" label="事件类型" prop="eventTypeEnum">
          <el-select v-model="fieldForm.eventTypeEnum" placeholder="请选择事件类型">
            <el-option label="信息" value="INFO" />
            <el-option label="告警" value="ALERT" />
            <el-option label="故障" value="ERROR" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="fieldType === '属性'" label="属性说明" prop="remark">
          <el-input v-model="fieldForm.remark" placeholder="请输入属性说明" />
        </el-form-item>
        <el-form-item v-if="fieldType === '服务'" label="服务说明" prop="remark">
          <el-input v-model="fieldForm.remark" placeholder="请输入服务说明" />
        </el-form-item>
        <el-form-item v-if="fieldType === '事件'" label="事件说明" prop="remark">
          <el-input v-model="fieldForm.remark" placeholder="请输入事件说明" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <sub-button title="提交" @subClick="handleSubClick" />
        <cancel-button @cancelClick="handleCancelUpdate" />
      </template>
    </el-dialog>
  </div>
</template>

<script>
import SubButton from '@/components/sub-button/index'
import CancelButton from '@/components/cancel-button/index'
import {
  findServiceList,
  findPropertyList,
  addServe,
  addField,
  delServicesById,
  delPropertyById,
  updateServe,
  updateProperty,
  addEvent,
  findIotEventPageByParam,
  updateEvent,
  delEvent,
} from '../api'
import { handleScreenWidthToVw } from '@/utils/tools'
import TableCard from '@/components/table-card/index'
import NewFieldDialog from './new-field-dialog.vue'
import CopyFieldDialog from './copy-field-dialog'

export default {
  components: {
    TableCard,
    NewFieldDialog,
    SubButton,
    CancelButton,
    CopyFieldDialog,
  },
  data() {
    return {
      isNewDialogVisible: false,
      isUpdateShow: false,
      isCopyDialogShow: false,
      fieldType: '属性',
      propertyTableSet: {
        columns: [
          { label: '属性名称', prop: 'name' },
          { label: '标识符', prop: 'property' },
          { label: '参数类型', prop: 'typeName' },
          { label: '属性说明', prop: 'remark' },
        ],
        tableData: [],
        actionBar: true,
      },
      propertyPage: {
        total: null,
        pageSize: 3,
        pageNo: 1,
      },
      fieldForm: {},
      serviceTableSet: {
        columns: [
          { label: '服务名称', prop: 'name' },
          { label: '标识符', prop: 'identifier' },
          { label: '服务说明', prop: 'remark' },
        ],
        tableData: [],
        actionBar: true,
      },
      eventTableSet: {
        columns: [
          { label: '事件名称', prop: 'name' },
          { label: '标识符', prop: 'identifier' },
          { label: '事件类型', prop: 'eventTypeName' },
          { label: '事件说明', prop: 'remark' },
        ],
        tableData: [],
        actionBar: true,
      },
      eventPage: {
        total: null,
        pageSize: 3,
        pageNo: 1,
      },
      servicePage: {
        total: null,
        pageSize: 3,
        pageNo: 1,
      },
    }
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    Rules() {
      return {
        name: [
          {
            required: true,
            message: '名称不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        identifier: [
          {
            required: true,
            message: '标识符不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        type: [{ required: true, message: '请选择参数类型', trigger: 'change' }],
        eventTypeEnum: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
      }
    },
  },
  created() {
    this.init()
  },
  methods: {
    // 取消按钮
    handleCancelUpdate() {
      this.isUpdateShow = false
      this.$nextTick(() => {
        this.$refs['updateFieldForm'].resetFields()
      })
    },
    // 切换页面
    async changePage(pageNo, type) {
      if (type === '属性') {
        this.propertyPage.pageNo = pageNo
        await this.getPropertyList()
      } else if (type === '服务') {
        this.servicePage.pageNo = pageNo
        await this.getServiceList()
      } else {
        this.eventPage.pageNo = pageNo
        await this.getEventList()
      }
    },
    // 提交修改
    async handleSubClick() {
      if (this.fieldType === '属性') {
        await updateProperty(this.fieldForm)
        await this.getPropertyList()
      } else if (this.fieldType === '服务') {
        await updateServe(this.fieldForm)
        await this.getServiceList()
      } else {
        await updateEvent(this.fieldForm)
        this.getEventList()
      }
      this.isUpdateShow = false
      this.$message({
        type: 'success',
        message: '修改成功!',
      })
    },
    // 修改字段
    updataField(row, type) {
      this.fieldType = type
      this.fieldForm = row
      this.isUpdateShow = true
    },
    // 删除服务
    handleDeleteService(row) {
      this.$confirm('此操作将永久删除该服务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await delServicesById(row.id)
          await this.getServiceList()
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 删除事件
    handleDeleteEvent(row) {
      this.$confirm('此操作将永久删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await delEvent(row.id)
          await this.getEventList()
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 删除属性
    async handleDeleteProperty(row) {
      this.$confirm('此操作将永久删除该属性, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await delPropertyById(row.id)
          await this.getPropertyList()
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 初始化页面
    async init() {
      this.getPropertyList()
      this.getServiceList()
      this.getEventList()
    },
    // 获取物模型属性列表
    async getPropertyList() {
      const propertyQuery = {
        metadataId: this.$route.query.id,
        pageNo: this.propertyPage.pageNo,
        pageSize: this.propertyPage.pageSize,
      }
      const { total, records } = await findPropertyList(propertyQuery)
      for (let i = 0; i < records.length; i++) {
        switch (records[i].type) {
          case 'STRING':
            records[i].typeName = '字符串'

            break
          case 'FLOAT':
            records[i].typeName = '浮点数'
            break
          case 'LONG':
            records[i].typeName = '长整数 '
            break
          default:
            break
        }
      }
      this.propertyTableSet.tableData = records
      this.propertyPage.total = total
    },
    // 获取物模型服务列表
    async getServiceList() {
      const serviceQuery = {
        metadataId: this.$route.query.id,
        pageNo: this.servicePage.pageNo,
        pageSize: this.servicePage.pageSize,
      }
      const { total, records } = await findServiceList(serviceQuery)
      this.serviceTableSet.tableData = records
      this.servicePage.total = total
    },
    async getEventList() {
      const eventQuery = {
        metadataId: this.$route.query.id,
        pageNo: this.eventPage.pageNo,
        pageSize: this.eventPage.pageSize,
      }
      const { total, records } = await findIotEventPageByParam(eventQuery)
      this.eventTableSet.tableData = records
      this.eventPage.total = total
    },
    // 提交添加新字段按钮
    async handleSubNewDialog(fieldForm) {
      if (fieldForm.switch === 'property') {
        await addField(fieldForm)
        this.getPropertyList()
      } else if (fieldForm.switch === 'serve') {
        await addServe(fieldForm)
        this.getServiceList()
      } else {
        await addEvent(fieldForm)
        await this.getEventList()
      }
      this.isNewDialogVisible = false
      this.$message({
        type: 'success',
        message: '添加成功!',
      })
    },
    // 取消添加新字段按钮
    handleCancelNewDialog() {
      this.$refs.newField.resetForm()
      this.isNewDialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
}
.model-function {
  height: 92%;
  overflow-y: auto;
}
.normal-height {
  height: vh(340px);
}

::v-deep {
  .el-dialog__footer {
    padding: vh(10px) vw(20px) vh(20px);
    text-align: center;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}
</style>
